import React from 'react';
import {
  Users,
  FileText,
  Image,
  MessageSquare,
  TrendingUp,
  Activity
} from 'lucide-react';

const stats = [
  {
    icon: <Users className="w-6 h-6" />,
    label: '用户总数',
    value: '2,458',
    trend: '+12.5%',
    color: 'bg-blue-500'
  },
  {
    icon: <FileText className="w-6 h-6" />,
    label: '训练活动',
    value: '156',
    trend: '+8.2%',
    color: 'bg-purple-500'
  },
  {
    icon: <Image className="w-6 h-6" />,
    label: '媒体文件',
    value: '3,862',
    trend: '+15.3%',
    color: 'bg-green-500'
  },
  {
    icon: <MessageSquare className="w-6 h-6" />,
    label: '评论数',
    value: '921',
    trend: '+6.8%',
    color: 'bg-amber-500'
  }
];

export default function AdminDashboard() {
  return (
    <div>
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900">仪表盘</h1>
        <p className="text-gray-500">欢迎回来，以下是系统的概览数据</p>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {stats.map((stat, index) => (
          <div
            key={index}
            className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow"
          >
            <div className="flex items-center justify-between mb-4">
              <div className={`p-3 rounded-lg ${stat.color} text-white`}>
                {stat.icon}
              </div>
              <div className="flex items-center text-green-500 text-sm">
                <TrendingUp className="w-4 h-4 mr-1" />
                {stat.trend}
              </div>
            </div>
            <h3 className="text-gray-500 text-sm mb-1">{stat.label}</h3>
            <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
          </div>
        ))}
      </div>

      {/* 活动趋势图表 */}
      <div className="bg-white rounded-xl p-6 shadow-sm mb-8">
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-lg font-semibold text-gray-900">活动趋势</h2>
          <div className="flex items-center text-sm text-gray-500">
            <Activity className="w-4 h-4 mr-1" />
            实时数据
          </div>
        </div>
        <div className="h-80 flex items-center justify-center text-gray-400">
          图表区域（这里需要集成图表库，如 Recharts 或 Chart.js）
        </div>
      </div>

      {/* 最近活动 */}
      <div className="bg-white rounded-xl p-6 shadow-sm">
        <h2 className="text-lg font-semibold text-gray-900 mb-6">最近活动</h2>
        <div className="space-y-6">
          {[1, 2, 3].map((_, index) => (
            <div key={index} className="flex items-center justify-between pb-4 border-b last:border-0">
              <div className="flex items-center space-x-4">
                <div className="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center">
                  <Users className="w-6 h-6 text-gray-500" />
                </div>
                <div>
                  <h3 className="font-medium text-gray-900">新用户注册</h3>
                  <p className="text-sm text-gray-500">张三加入了团队</p>
                </div>
              </div>
              <span className="text-sm text-gray-500">2分钟前</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}